<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <p>根据页面的UI效果或者功能，划分页面为不同的模块，每个模块就是一个组件。一个组件就是一个vue实例</p>
        <p>区别1: 组件中的data应该是一个有返回值的函数（？）</p>
        <p>区别2: 组件中的template有且只有一个根元素</p>
        <p>区别3: 组件名在JS中写成驼峰，在html中写成对应的中划线</p>
        <p>区别4: 组件名不要和已有的标签名冲突，可以给组件起两个或多个单词组成的名字</p>
        <p></p>
        <aaa></aaa>
        <hr>
        <p>{{msg}}</p>
        <hr>
        <v-footer></v-footer>
    </div>
    <script src="../0511/js/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                msg: 'hi'
            },
            // 局部注册
            components: {
                // 一个组件就是一个实例
                'aaa': {
                    template: `
                        <div>
                            <ul>
                                <li>{{msg}} 这是我的第一个组件，我骄傲！</li>
                                <li>{{msg}} 这是我的第一个组件，我骄傲！</li>
                                <li>{{msg}} 这是我的第一个组件，我骄傲！</li>
                            </ul>    
                            <button>login</button>
                        </div>
                    `,
                    data() { // 组件中的data应该是一个有返回值的函数
                        return {
                            msg: 'hello'
                        }
                    }
                },
                'vFooter': {
                    template: 
                    `
                        <div>
                            <input v-model="info" />
                            <button @click="show">click</button>
                       </div>
                    `,
                    data() {
                        return {
                            info: '福尔摩斯就是lll'
                        }
                    },
                    methods: {
                        show(){
                            console.log(this.info);
                        }
                    }
                }
            }
        })
    </script>
</body>

</html>